<template>
    <div class="myWelfare">
      <button type="primary" class="btn" open-type="contact" bindcontact="handleContact">
        联系客服
      </button>
      <div class="myWelfare-main" v-for="(item,index) in welfareList" :key="index">
        <img :src="picPre + item.thumb" alt="">
        <div style="flex: 1">
          <div class="myWelfare-title">
            <P>{{item.title}}</P>
            <p v-if="item.status==='2'" style="font-size: 28rpx;color: #EF5A56;">已兑换</p>
          </div>
          <p v-if="item.status==='1'">兑换中，请主动联系客服</p>
          <p v-else style="color: #323232;">{{item.mark}}</p>
        </div>
      </div>
      <bottoms></bottoms>
    </div>
</template>

<script>
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "myWelfare",
      components:{
        bottoms
      },
      data(){
        let that = this;
          return{
            picPre: that.$api.picPre,
            welfareList:[],
            loadingEnd:{
              moduleOne: false,
            },
            totalPage: 1,
            currentPage: 1
          }
      },
      methods:{
        getMyWeal(){
          this.$ajax
            .post(this.$api.myWeal,{page: this.currentPage,page_size:10})
            .then(res => {
              this.welfareList.push(...res.data);
              this.loadingEnd.moduleOne = true;
              this.totalPage = res.total_page;
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              ﻿uni.showToast({
                title: err,
                icon: 'warn',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          this.currentPage = 1;
          this.welfareList = [];
          this.loadingEnd = {
            moduleOne: false,
          };
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getMyWeal();
        }
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onPullDownRefresh(){
        this.viewLoad();
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++;
          this.getMyWeal();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      onLoad() {
        this.viewLoad()
      }
    }
</script>

<style scoped>
.myWelfare{
  padding-bottom: 98rpx;
  box-sizing: border-box;
}
  .myWelfare-main{
    padding: 10rpx 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
    box-sizing: border-box;
    display: flex;
  }
.myWelfare-main>img{
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 29rpx;
}
.myWelfare-title{
  display: flex;
  justify-content: space-between;
  color:#323232;
  font-size: 32rpx;
  font-weight:500;
}
.myWelfare-title>p:first-child{
  width: 85%;
}
.myWelfare-title+p{
  font-size: 24rpx;
  color: #FFA45B;
  font-family:PingFang SC;
  font-weight:500;
  margin-top: 19rpx;
}
.btn{
  background-color: #EF5A56;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  color: #FFFFFF;
  font-size: 34rpx;
  border-radius: 0;
  z-index: 1000;
}
</style>
